/**
* 左边菜单
*/ 
<template>
  <el-menu
    default-active="1-1"
    :default-openeds="defaultOpens"
    :collapse="collapsed"
    collapse-transition
    unique-opened
    class="el-menu-vertical-demo" background-color="#334157" text-color="#333333" active-text-color="#3691FF">
    <el-submenu v-for="menu in allmenu" :key="menu.index" :index="menu.index">
      <template slot="title">
        <i class="iconfont" :class="menu.icon"></i>
        <span>{{ menu.title }}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item v-for="chmenu in menu.menuGropList" :index="chmenu.index" :key="chmenu.index" @click="handleMenu(menu, chmenu)">
          <i class="iconfont" :class="chmenu.icon"></i>
          <span>{{ chmenu.title }}</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
  <!-- <div class="substance-div">
    <div class="menu-div">
      <el-menu router :default-active="defaultActive" class="el-menu-vertical-demo" active-text-color="#3691FF"
        text-color="#333333" :default-openeds="defaultOpens" @open="handleOpen" @close="handleClose">
        <el-submenu class="menu-style" :class="[chooseMenuIndex === item.index ? 'choose-menu-style' : '']"
          v-for="(item, index) in menuList" :key="index" :index="item.index">
          <template slot="title">
            <i class="icon-style"></i>
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item v-for="(item1, index) in item.menuGropList" :key="index" :index="'/' + item1.url"
              @click="handleMenu(item1, item)">
              <template slot="title">
                <i class="grop-icon-style"
                  :class="[chooseMenuGropIndex === item1.index ? 'choose-grop-icon-style' : '']"></i>
                <span>{{ item1.title }}</span>
              </template>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
  </div> -->
</template>
<script>
import { menu } from '../api/userMG'
export default {
  name: 'leftnav',
  data() {
    return {
      collapsed: false,
      allmenu: [],
      defaultOpens:['1'],
      defaultActive: '1-1',
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    // 获取图形验证码
    let res = {
      success: true,
      data: [
        {
          index: '1',
          icon: 'li-icon-xiangmuguanli',
          title: '批发市场基本信息管理',
          hasThird: null,
          url: null,
          menuGropList: [
            { index: '1-1', title: '基本人事档案', url: 'wholesaleMarket/index' },
            { index: '1-2', title: '商铺信息', url: 'wholesaleMarket/shopInfo' },
            { index: '1-3', title: '商铺摊位申请', url: 'basicInformation/application' },
            { index: '1-4', title: '批发市场数据分析', url: 'basicInformation/rule' },
            { index: '1-5', title: '不合规数据分析', url: 'basicInformation/rule' }
          ],
        },
        {
          index: '2',
          title: '电商数据管理',
          menuGropList: [
            { index: '2-1', title: '电商基本信息管理', url: 'basicInformation/commerce' },
            { index: '2-2', title: '电商交易数据对接与维护', url: 'basicInformation/trade' },
            { index: '2-3', title: '电商数据分析', url: 'commerce/commerceAnalysis' },
            { index: '2-4', title: '不合规数据分析', url: 'basicInformation/commerceRule' },
            { index: '2-5', title: '综合指导价格推送', url: 'basicInformation/price' }
          ],
        },
        {
          index: '3',
          title: '品牌数字化管理',
          menuGropList: [
            { index: '3-1', title: '区域公众品牌', url: 'basicInformation/public' },
            { index: '3-2', title: '知名企业品牌', url: 'basicInformation/famous' }
          ],
        }, {
          index: '4',
          title: '展会数字化管理',
          menuGropList: [{ index: '4-1', title: '展会信息管理',url: 'basicInformation/exhibition'}],
        }, {
          index: '5',
          title: '农产品全程配置管理',
          menuGropList: [
            { index: '5-1', title: '产品管理', url: 'agManage/product' },
            { index: '5-2', title: '田间档案', url: 'agManage/fieldArchives' },
            { index: '5-3', title: '企业信息', url: 'agManage/enterpriseInfo' },
            { index: '5-4', title: '产地信息', url: 'agManage/producerInfo' },
            { index: '5-5', title: '仓储加工', url: 'agManage/warehouse' },
            { index: '5-6', title: '物流信息', url: 'agManage/logisticsInfo' },
            { index: '5-7', title: '公信检测', url: 'agManage/publicTrust' },
            { index: '5-8', title: '营养价值', url: 'agManage/nutritive' },
            { index: '5-9', title: '健康食谱', url: 'agManage/health' },
            { index: '5-10', title: '履历档案', url: 'agManage/resume' },
            { index: '5-11', title: '全程履历', url: 'agManage/wholeCourseResume' },
            { index: '5-12', title: '生产溯源码', url: 'agManage/traceability' },
            { index: '5-13', title: '履历赋码', url: 'agManage/resumeCode' }
          ],
        }, {
          index: '6',
          title: '数据大屏',
          menuGropList: [{ index: '6-1', title: '数据大屏' }],
        }, {
          index: '7',
          title: '系统管理',
          menuGropList: [
            { index: '5-1', title: '用户管理', url: 'system/user' },
            { index: '5-2', title: '角色管理', url: 'system/role' },
            { index: '5-3', title: '菜单管理', url: 'system/menu' },
            { index: '5-4', title: '部门管理', url: 'system/depart' },
            { index: '5-5', title: '岗位管理', url: 'system/post' }],
        }
      ],
      msg: 'success'
    }
    this.allmenu = res.data
    // 监听
    // this.$root.Bus.$on('toggle', value => {
    //   this.collapsed = !value
    // })
  },
  mounted(){
    this.$router.push({
      path: '/wholesaleMarket/index'
    })
  },
  methods:{
    handleMenu(menu, chmenu){
      console.log('handleMenu', menu, chmenu, this.$route);
      if (this.$route.path == ('/' + chmenu.url)) return
      this.$router.push({
        path: '/' + chmenu.url
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-menu-vertical-demo {
  background-color: #fff !important;
  width: 100% !important;
  overflow: auto;
  height: 90vh;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  // width: 240px;
  min-height: 400px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}

/deep/ .el-menu-item-group__title {
  padding: 0px !important;
}

.el-menu-bg {
  background-color: #fff !important;
}

.el-menu {
  border: none;
}

.logobox {
  height: 40px;
  line-height: 40px;
  color: #9d9d9d;
  font-size: 20px;
  text-align: center;
  padding: 20px 0px;
}

.logoimg {
  height: 40px;
}

li {
  background-color: #fff;
}

/deep/ .el-menu-item {
  background-color: #fff !important;
}

/deep/ .el-submenu__title {
  background-color: #fff !important;
}
</style>